<template>
  <div class="domain_table">
    <div class="header">
      <span class="iconfont icon-zhankai"
            @click="edit(-1)"><span>添加</span></span>
      <el-button class="iconfont icon-shuaxin"
                 :loading="refreshLoading"
                 @click="refresh"><span>刷新</span></el-button>
      <el-input
              class = "fr"
              placeholder="请输入内容"
              size="mini"
              @keyup.enter.native = "searchTitle"
              v-model="title">
        <i
                class="el-input__icon el-icon-search"
                slot="suffix"
                @click="searchTitle">
        </i>
      </el-input>
      <div class="pagina fr">
        <pagination
                small=""
                :currentPage="currentPage"
                :count="count"
                @turnPage="turnPage"
                :totalPage="totalPage"></pagination>
      </div>
    </div>
    <el-table :data="tableData"
              border
              v-loading = "tableLoading"
              size="mini"
              style="width: 100%">
      <el-table-column
              prop="title"
              label="域名标题"></el-table-column>
      <el-table-column
              prop="updateTime"
              label="创建时间"></el-table-column>
      <el-table-column
              label="创建人">
        <template scope="scope">
          <agent :id="scope.row.updateUser" :isNum="true"></agent>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button type="text"
                     size="small"
                     @click="edit(scope.$index, tableData)">编辑</el-button>
          <el-button type="text"
                     size="small"
                     @click="dele(tableData[scope.$index]._id, tableData[scope.$index].title)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import Agent from '@/components/public-modules/cache/Agent'
  import diyTable from '@components/business-modules/config/channelConfig/base/diyTable'
  export default {
    name: 'webDomainTable',
    data () {
      return {
        title: '',
        tableData: [
//          {
//            _id: '76d6f300-b9e1-11ea-9838-03a0ce0f6eeb',
//            updateTime: '2020-06-29 16:21:00',
//            domain: 'bx.8balance.tech',
//            account: 'N00000001557',
//            title: '测试',
//            status: '',
//            updateUser: '6229bab6-583e-11ea-9772-81d459b76e5c'
//          },
//          {
//            _id: 'cc8e3380-b9d7-11ea-a316-dbd218985e38',
//            updateTime: '2020-06-29 15:11:48',
//            domain: 'b.8balance.tech',
//            account: 'N00000001557',
//            title: '测试',
//            status: '',
//            updateUser: '6229bab6-583e-11ea-9772-81d459b76e5c'
//          },
//          {
//            _id: '1d68cf30-b9a2-11ea-a316-dbd218985e38',
//            updateTime: '2020-06-29 08:47:31',
//            domain: 'd.test.sinalvee.io',
//            account: 'N00000001557',
//            title: '测试',
//            status: '',
//            updateUser: '6229bab6-583e-11ea-9772-81d459b76e5c'
//          },
//          {
//            _id: '5c55e600-b935-11ea-8d04-09e96e69c534',
//            updateTime: '2020-06-28 19:49:02',
//            domain: 'b.test.sinalvee.io',
//            account: 'N00000001557',
//            title: '测试',
//            status: '',
//            updateUser: '6229bab6-583e-11ea-9772-81d459b76e5c'
//          },
//          {
//            _id: '79689840-b90e-11ea-b832-57ff6287e2ec',
//            updateTime: '2020-06-28 15:12:22',
//            domain: 'a.test.sinalvee.io',
//            account: 'N00000001557',
//            title: '测试',
//            status: '',
//            updateUser: '6229bab6-583e-11ea-9772-81d459b76e5c'
//          }
        ],
        refreshLoading: false,
        dialogVisible: false,
        tableLoading: false,
        count: 0,
        totalPage: 1,
        currentPage: 1,
        isSearch: false
      }
    },
    props: {
      random: {
        type: Number,
        default: function () {
          return 0
        }
      }
    },
    watch: {
      random () {
        this.refresh()
      }
    },
    components: {
      Pagination,
      Agent,
      diyTable
    },
    methods: {
      // 获取列表第一页最新数据
      refresh () {
        this.title = ''
        this.isSearch = true
        if (this.currentPage === 1) {
          this.isSearch = false
        }
        this.refreshLoading = true
        window.setTimeout(() => {
          this.refreshLoading = false
        }, 400)
        this.currentPage = 1
        this.intiTable()
      },
      // 通过关键字搜索网站名称列表
      searchTitle () {
        this.currentPage = 1
        this.intiTable(this.title)
      },
      // 翻页触发
      turnPage (index) {
        this.currentPage = index
        if (this.isSearch && index < 2) {
          this.isSearch = false
          return
        }
        this.intiTable()
      },
      edit (index, obj) {
        if (index === -1) {
          this.$emit('edit', '')
        } else {
          this.$emit('edit', obj[index])
        }
      },
      dele (id, webname) {
        let text = `确定要删除【${webname}】域名吗`
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        }).then(() => {
          this.$store.dispatch('delDomain', { _id: id }).then(res => {
            if (res && res.success) {
              this.currentPage = 1
              this.isSearch = true
              this.intiTable()
              this.$message.success('删除成功')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      // 通过参数判断是否传title
      intiTable (title) {
        this.tableLoading = true
        let data = {
          page: this.currentPage,
          limit: 10,
          title: this.title
        }
        if (typeof title === 'string') {
          this.isSearch = true
          data.title = title
        }
        this.$store.dispatch('getDomainList', data).then(res => {
          if (res && res.success) {
            this.tableData = res.data
            this.count = res.count
            this.totalPage = Math.ceil(res.count / 10)
            this.tableLoading = false
          }
        })
      }
    },
    beforeMount () {
      this.intiTable()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .new-config
    .domain_table
      height calc(100vh - 52px)
  .domain_table
    height calc(100vh - 174px)
    overflow auto
    .header
      padding 6px 10px
      height 34px
      line-height 34px
      .el-input
        width 170px
      span
        cursor pointer
      .iconfont
        color $c-main
        font-size 12px
        span
          color $cf-gray2
          margin-left 6px
      .el-button
        padding 0
        border none
        margin-left 10px
    .el-table
      .cell
        .el-button:nth-child(2)
          color $c-pink
    .el-dialog
      .dele_text
        text-align center
      .el-dialog__footer
        text-align center

</style>
